<template>
  <view class="bg-white rounded-[20rpx] shadow-md mb-[24rpx] overflow-hidden">
    <view class="bg-[#e4f0e4] p-[24rpx] btops border-b border-gray-100 flex items-center justify-between" @click="goToHomeCareAssessment">
      <text class="text-[28rpx] font-bold text-gray-800">居家护理专项评估</text>
    </view>
    <view class="p-[24rpx] transition-all duration-300">
      <text class="text-[24rpx] text-gray-600 block mb-[30rpx]">进行详细的居家护理专项评估，包括服务对象、监护人、服务人员三个视角的评估内容</text>
      <nut-button type="warning" class="!rounded-[12rpx] mb-[24rpx]" shape="square" size="large" block @click="goToHomeCareAssessment">
        <template #icon>
          <IconFont font-class-name="iconfont" class-prefix="icon" name="-yiliao" size="16" color="#fff" />
        </template>
        开始居家护理专项评估
      </nut-button>
    </view>
  </view>
</template>

<script setup lang="ts">
import Taro from '@tarojs/taro'
import { IconFont } from '@nutui/icons-vue-taro'
import { useItemManagement } from '@/composables/useItemManagement'

const { formData } = useItemManagement()

/**
 * 跳转到居家护理专项评估页面
 */
function goToHomeCareAssessment() {
  try {
    console.log("跳转到居家护理专项评估页面")

    // 构建跳转参数
    const params = new URLSearchParams()
    params.append("type", "homeCareAssessment")

    if (formData.value.idNumber) {
      params.append("idNumber", formData.value.idNumber)
    }
    if (formData.value.name) {
      params.append("name", formData.value.name)
    }

    // 跳转到居家护理专项评估页面
    const url = `/pages/home-care-assessment/index?${params.toString()}`
    console.log("跳转URL:", url)
    
    Taro.navigateTo({
      url: url,
      success: () => {
        console.log("居家护理专项评估页面跳转成功")
      },
      fail: (error) => {
        console.error("居家护理专项评估页面跳转失败:", error)
        Taro.showToast({
          title: "页面跳转失败",
          icon: "none",
          duration: 2000,
        })
      }
    })
  } catch (error) {
    console.error("跳转到居家护理专项评估页面时出错:", error)
    Taro.showToast({
      title: "跳转失败",
      icon: "none",
      duration: 2000,
    })
  }
}
</script>

<style scoped lang="scss">
.btops {
  border-top: solid 6rpx #8bc34a;
}
</style>
